<link rel="stylesheet" href="/static/layuiadmin/style/template.css" media="all">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<div class="layui-fluid layadmin-maillist-fluid">
    <fieldset class="layui-elem-field">
        <div class="layui-field-box">
            <button type="button"
                    class="layui-btn layuiadmin-btn-admin {$auth->check('administration/BirthdayCalendar')?$auth->check('administration/BirthdayCalendar'):'hide'}"
                    title="生日日历" data-type="birthday_calendar">生日日历
            </button>
            <button type="button"
                    class="layui-btn layuiadmin-btn-admin {$auth->check('administration/ChangeTable')?$auth->check('administration/ChangeTable'):'hide'}"
                    title="转换表格" data-type="change_table">转换表格
            </button>
            <span style="float: right; font-size: 12px;color: red;">备注：上传照片，请限制大小为50KB之内，尽量使用正方形，200x200</span>
        </div>
    </fieldset>
    <div class="layui-row layui-col-space15">
        {foreach $model as $key=>$vo}
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layadmin-contact-box" >
                <div class="layui-col-md4 layui-col-sm6" id="layadmin-text-center">
                    <a href="javascript:;" name="{$vo.id}" id="id_upload_img{$vo.id}" data-anim="{$vo.id}">
                        <div class="layadmin-text-center">
                            <img src="{$vo.portrait}"
                                 onerror="this.src='/static/layuiadmin/style/res/template/character.jpg'"
                                 id="img_src{$vo.id}">
                            <div class="layadmin-maillist-img layadmin-font-blod">安玛尔</div>
                        </div>
                    </a>

                </div>
                <div class="layui-col-md8 layadmin-padding-left20 layui-col-sm6 archives" id="{$vo.id}">
                    <a href="javascript:;">
                        <h3 class="layadmin-title">
                            <strong>{$vo.nickname ?? ''}</strong>
                        </h3>
                        <p class="layadmin-textimg">
                            <i class="layui-icon layui-icon-location"></i>
                            {$vo.rules}
                        </p>
                    </a>
                    <div class="layadmin-address">
                        <a href="javascript:;">
                            <strong>{$vo.username ?? ''}</strong>
                            <br>
                            Email:{$vo.email ?? ''}
                            <br>
                            <addr title="phone">Tel:</addr>
                            {$vo.mobile ?? ''}
                            <br>
                            <b style="color: red">{$vo.birthday_num ?? ''}</b>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {/foreach}
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var BirthdayCalendar = "{:url('administration/BirthdayCalendar')}",
        ChangeTable = "{:url('administration/ChangeTable')}",archives = "{:url('administration/archives')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        var $ = layui.$,
            form = layui.form
            , layer = layui.layer, upload = layui.upload;

        $('.archives').click(function () {
            var param = $.param({'admin_id': $(this).attr("id")});
            layer.open({
                type: 2
                , skin: 'layui-layer-molv'
                , title: '员工档案'
                , content: archives + '?' + param
                , area: ['100%', '100%']
                , maxmin: true
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-back-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: archives + '?' + param,
                            type: 'post',
                            data: field,
                            success: function (res) {
                                if (res.code === 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    layer.close(index); //关闭弹层
                                } else {
                                    console.log(res);
                                    layer.msg(res.msg, {icon: 5});
                                    return false;
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });
        $("#layadmin-text-center a").each(function () {
            var li_id = $(this).attr("id");
            var id = $(this).attr("name");
            upload.render({
                elem: '#' + li_id
                , url: "{:url('administration/upload')}" //改成您自己的上传接口
                ,size:50
                ,data:{
                    id: function(){
                        return id;
                    }
                }
                , multiple: false
                , accept: 'images/*'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $("#img_src" + id).attr('src', result); //图片链接（base64）
                    });
                }

            });
        });
        var active = {
            birthday_calendar: function () {
                layer.open({
                    type: 2
                    , skin: 'layui-layer-molv'
                    , title: '生日日历'
                    , content: BirthdayCalendar
                    , area: ['100%', '100%']
                    , maxmin: true
                });
            },
            change_table: function () {
                layer.open({
                    type: 2
                    , skin: 'layui-layer-molv'
                    , title: '转换表格'
                    , content: ChangeTable
                    , area: ['100%', '100%']
                    , maxmin: true
                });
            }

        }
        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>